/**
 * #info
 *@author   wuwg
 *@createTime   2018/03/20
 *@updateTime    2018/05/04
 *@description   steps  component 步骤条组件
 */
/**
 * #item
 *
 * @type  aty-steps
 * @cn    步骤
 * @order 100
 * @menu        导航
 * @stPlugin    true
 * @stContainer false
 * @children [aty-steps-item]
 */
import config from '../../../config/config.js'

// prefix
const prefixCls = config.prefix + '-steps'
// module
export default {
  name: prefixCls,
  props: {
    /**
     * #property
     *
     * @name current
     * @cn   当前步骤
     * @type number
     * @bind must
     * @value 0
     * @description 当前正在进行的步骤，从0开始计数，可填写数字或绑定Vue变量
     */
    current: {
      type: Number,
      default: 0
    },
    /**
     * #property
     *
     * @name status
     * @cn 状态
     * @type list
     * @options [wait, process, finish, error]
     * @value process
     * @description 当前步骤的状态，可选值为wait、process、finish、error
     */
    status: {
      validator (value) {
        return Artery.isOneOf(value, ['wait', 'process', 'finish', 'error'])
      },
      default: 'process'
    },
    /**
     * #property
     *
     * @name direction
     * @cn   尺寸
     * @type list
     * @options [horizontal, vertical]
     * @value horizontal
     * @description 步骤条的方向，可选值为[horizontal，vertical]中的一个
     */
    direction: {
      validator (value) {
        return Artery.isOneOf(value, ['horizontal', 'vertical'])
      },
      default: 'horizontal'
    }
  },
  watch: {
    current () {
      this.updateChildProps()
    },
    status () {
      this.updateCurrent()
    }
  },
  computed: {
    classes () {
      return [
                `${prefixCls}`,
                `${prefixCls}-${this.direction}`
      ]
    }
  },
  methods: {
    updateChildProps (isInit) {
      const total = this.$children.length
      this.$children.forEach((child, index) => {
        child.stepNumber = index + 1

        if (this.direction === 'horizontal') {
          child.total = total
        }

        /*
         * 如果已存在status,且在初始化时,则略过
         * todo 如果当前是error,在current改变时需要处理
         */
        if (!(isInit && child.currentStatus)) {
          if (index == this.current) {
            if (this.status != 'error') {
              child.currentStatus = 'process'
            }
          } else if (index < this.current) {
            child.currentStatus = 'finish'
          } else {
            child.currentStatus = 'wait'
          }
        }

        if (child.currentStatus != 'error' && index != 0) {
          this.$children[index - 1].nextError = false
        }
      })
    },
    setNextError () {
      this.$children.forEach((child, index) => {
        if (child.currentStatus == 'error' && index != 0) {
          this.$children[index - 1].nextError = true
        }
      })
    },
    updateCurrent (isInit) {
      // 防止溢出边界
      if (this.current < 0 || this.current >= this.$children.length) {
        return
      }
      if (isInit) {
        const current_status = this.$children[this.current].currentStatus
        if (!current_status) {
          this.$children[this.current].currentStatus = this.status
        }
      } else {
        this.$children[this.current].currentStatus = this.status
      }
    },
    debouncedAppendRemove () {
      const _this = this
      return Artery.debounce(function () {
        _this.updateSteps()
      })
    },
    updateSteps () {
      this.updateChildProps(true)
      this.setNextError()
      this.updateCurrent(true)
    }
  },
  mounted () {
    this.updateSteps()
    this.$on('append', this.debouncedAppendRemove())
    this.$on('remove', this.debouncedAppendRemove())
  }
}
